<template>
  <view class="container">
    <view class="swiper-padding">
      <view  class="content">
         <view class="swiper-margin">
         
             <swiper
               class="swiper introduce_imglunbo"
               circular
               autoplay>
               <swiper-item class="swiper-item  swiper-itemlunbo" v-for="info in eventsInfo.lunbo">
                 <image
                   class="introduce_imglunbo"
                   style="width: 100%;height: 100%;"
                   mode="aspectFill"
                   :src="info" 
                  ></image>
               </swiper-item>
             </swiper>
			 <view class="Burst8">
			    <view class="price" style="font-family:AlimamaShuHeiTi-Bold">{{eventsInfo.price==0?"免费":eventsInfo.price+'元'}}</view>
			  </view>
           </view>
		   
		   
        <view class="view-title">
          {{ eventsInfo.title }}
        </view>
		<view class="view-time">
			<image class="iconimg" src="@/static/image/time.png"></image>
		   <view style="width: 100%; margin-left: 10rpx;">
			   {{eventsInfo.startTime?.substr(5)}} - {{eventsInfo.endTime?.substr(5)}}
		   </view>
		</view>
		<view class="view-time">
			<image class="iconimg" src="@/static/image/local.png"></image>
		   <view style="width: 100%; margin-left: 10rpx;">
			    {{eventsInfo.addr}}
		   </view>
		</view>
        <!-- 地址部分 -->
        <view class="view-base-info">
          <view class="steps-row">
            <view class="step-container">
              <view class="row-line-item" v-for="n in 4" :key="n">
                <view class="steps__row-line row-line--before" :style="{backgroundColor: n === 1 ? 'transparent' : ''}"></view>
                <view class="steps-row-circle" v-if="n>eventsInfo.status">
                  <image    src="@/static/image/walkon.png" style="width: 100%;height: 100%;"></image>
                </view>
				<view class="steps-row-circle" v-else-if="n==eventsInfo.status">
				  <image    src="@/static/image/walkon.gif" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="steps-row-circle" v-else>
				  <image    src="@/static/image/walkoff.png" style="width: 100%;height: 100%;"></image>
				</view>
                <view class="steps__row-line row-line--after" :style="{backgroundColor: n === 4 ? 'transparent' : ''}"></view>
              </view>
            </view>
            <view class="row-text-container">
              <view class="row-text">
                <view class="row-title">报名开始</view>
                <view class="row-desc">{{eventsInfo.signUpStart?.substr(5)}}</view>
              </view>
              <view class="row-text">
                <view class="row-title">报名结束</view>
                <view class="row-desc">{{eventsInfo.signUpEnd?.substr(5)}}</view>
              </view>
              <view class="row-text">
                <view class="row-title">活动开始</view>
                <view class="row-desc">{{eventsInfo.startTime?.substr(5)}}</view>
              </view>
              <view class="row-text">
                <view class="row-title">活动结束</view>
                <view class="row-desc">{{eventsInfo.endTime?.substr(5)}}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 报名人数 -->
        <view class="number-content">
          <view>已报名：{{eventsInfo.activatePeople}} 人{{ !eventsInfo.totlePeople ?'，虚席以待': '' }}</view>
          <view class="events-touxiang">
            <view v-for="(item, index) in eventsInfo.peopleImg" :key="index">
              <view class="avater u-center">
                <image :src="item" mode="aspectFill" style="width: 100%;height: 100%;"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="detail-padding">
      <view class="content">
        <view class="tab_nav">
          <view class="navTitle" @click="checked(0)">
            <view class="title_tabs u-center" :class="{ active: isActive === 0 }">
              <img style="width: 40rpx;height: 40rpx;margin-right: 6rpx;" src="@/static/image/xingxing.svg" v-if="isActive === 0">
              活动详情
            </view>
          </view>
          <view class="navTitle" @click="checked(1)">
            <view class="title_tabs  u-center" :class="{ active: isActive === 1 }">
              <img style="width: 40rpx;height: 40rpx;margin-right: 6rpx;" src="@/static/image/pingjia.png" v-if="isActive === 1">
              客户评价
            </view>
          </view>
        </view>
      <view class="nav_item_2" v-if="isActive === 0">
        <view>
			{{eventsInfo.content}}
		</view>
		<view v-for="(inde,key) in eventsInfo.lunbo" :key="key">
		    <image :src="inde" mode="aspectFill" style="width: 100%;"></image>
		</view>
      </view>
        <view class="nav_item_2" v-if="isActive === 1">
          <view v-if="reviewData.list.length > 0">
            <view :key="idx" v-for="(item, idx) in reviewData.list" class="review_div" :style="idx === 0 ? 'margin-top:0;' : ''">
            </view>
          </view>
          <view class="no-data" v-else>
			  <image class ="nodataimg" src="@/static/image/nodata.png"></image>
            <view :title="eventsInfo.status === 4 ? '暂无评论哦～' : '还未开始评论哦'"  > </view>
          </view>
        </view>
      </view>
    </view>
    <view class="booking_div" style="font-family: AlimamaShuHeiTi-Bold;">
      <button class="opt-btn"  @click="loginJudge" open-type="share">
        <image class="share-image" src="@/static/image/share.svg"></image>
        分享
      </button>
      <view class="booking" @click="loginJudge">
        <template v-if="eventsInfo.selfSupport === 0">
          <view class="u-center" >
            <view>停止报名</view>
			</view>
        </template>
        <template v-if="eventsInfo.selfSupport === 1">
          <view class="" >
            <view style="font-size: 30rpx;font-weight:bold">{{ eventsInfo.remainStockNum }}</view>
            <view>剩余名额</view>
          </view>
          <view
            class="sbtn u-center"
            :class="eventsInfo.remainStockNum > 0 && !eventsOrderId ? 'yellow' : ''">
            {{eventsOrderId ? '已报名' : '去报名'}}
          </view>
        </template>
      </view>
    </view>
	
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog :showClose="showClose" :type="msgType" cancelText="关闭" confirmText="去登录"
			content="还未登录!" @confirm="gotoLogin" @close="dialogClose"></uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="messagefinish" type="dialog">
		<uni-popup-dialog :showClose="showClose" :type="msgType" cancelText="再看看" confirmText="去完善"
			content="报名去完善信息!" @confirm="gotoFinish" @close="dialogClose"></uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="finish" type="dialog">
		<uni-popup-dialog :showClose="showClose" :type="msgType" cancelText="我一定准时到" confirmText="我会提前到哒"
			content="报名成功!请准时到达哦" @confirm="dialogClose" @close="dialogClose"></uni-popup-dialog>
	</uni-popup>

  </view>
</template>

<script>
import eventDetailVue from './eventDetail.vue';

	export default {
		data() {
			return {
				customerId:"",//是否登陆，登陆用户id
				isActive:0,
				eventid:"",
				eventsOrderId:false,//是否报名
				eventsInfo:{
				},
				messagefinish:"",//是否完善信息
				reviewData:{
					list:[]
				}
			}
		},
		onLoad(options){
			this.customerId=uni.getStorageSync('userId');
			this.eventid = options.id
			if(options.id) {
				uni.request({
					url:getApp().globalData.url +'heartwx/activity/'+options.id,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.eventsInfo = res.data.data
							this.eventsInfo.lunbo=this.eventsInfo.photo.split(',')
							this.eventsInfo.remainStockNum=this.eventsInfo.totlePeople-this.eventsInfo.activatePeople
							if(new Date(this.eventsInfo.signupEnd) > new Date()){
								this.eventsInfo.selfSupport=1
							}else{
								this.eventsInfo.selfSupport=0
							}
							if(this.eventsInfo.remainStockNum==0){
								this.selfSupport=0
							}
						}
					}
				});
			}
			if(this.customerId!=""){
				if(this.messagefinish==""){
					uni.request({
						url:getApp().globalData.url +'heartwx/user/finish/'+this.customerId,
						method: 'get',
						success: (res) => {
							if (res.data.code === 200) {
								 if(!res.data.data){
									this.messagefinish="0"
								 }
							}
						}
					});
				}
				uni.request({
					url:getApp().globalData.url +'heartwx/activity/registered',
					method: 'post',
					data:{
					  activateId:this.eventid,
					  userId:this.customerId
					},
					success: (res) => {
						if (res.data.code === 200) {
							 if(res.data.data>0){
								this.eventsOrderId=true
							 }
						}
					}
				});
			}
		},
		methods: {
			checked(idx) {
			  this.isActive = idx
			},
			loginJudge() {
			  if (!this.customerId) {
			    this.$refs.alertDialog.open()
				return
			  }
			  console.log(this.messagefinish)
			  if (this.messagefinish=="0") {
			    this.$refs.messagefinish.open()
				return
			  }
			  if(this.customerId&&this.messagefinish){
				  if(this.eventsOrderId){
					  uni.showToast({
					      title: '您已报名',
					      icon: 'success', // 可选，图标类型，如'success', 'loading', 'none'
					      duration: 2000, // 持续显示时间，单位ms
					      mask: false, // 是否显示透明蒙层，防止触摸穿透，默认为false
					      position: 'top' // 提示文字的位置，可选值为'top', 'middle', 'bottom'
					  });
				  }else{
					  uni.request({
						  url:getApp().globalData.url +'heartwx/activity/signup',
						  method: 'post',
						  data:{
							  activateId:this.eventid,
							  userId:this.customerId
						  },
							success: (res) => {
							if (res.data.code === 200) {
								 this.$refs.finish.open()
								}
							}
						})
					}
			  }
			},
			gotoLogin () {
			  const fulurl = '/pages/events/eventDetail/eventDetail?id='+this.eventid
			  const URL=encodeURIComponent(fulurl)
			  uni.reLaunch({
			    url: `/user/login/login?redirect=`+URL
			  })
			},
			gotoFinish () {
			  const fulurl = '/pages/events/eventDetail/eventDetail?id='+this.eventid
			  uni.reLaunch({
			    url: `/user/editUser/editUser?redirect=${encodeURIComponent(fulurl)}`
			  })
			}
		}
	}
</script>

<style  lang="scss" scoped>
@import '@/static/fonts/alimama.css';
  .nodataimg {
    width: 386rpx;
    height: 326rpx;
    margin-bottom: 20rpx;
  }
.no-data {
  text-align: center;
  color: #999999;
  padding: 40rpx 0;

}
.booking_div {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
  left: 0;
  padding: 10rpx 30rpx 0 54rpx;
  z-index: 98;
  display: flex;
  .opt-btn{
    background: rgba(0, 0, 0, 0);
    padding: 0;
    width: 50rpx;
    margin: 0 52rpx 0 0;
    font-size: 22rpx;
    line-height: 22rpx;
    text-align: center;
    margin-top: 12rpx;
    .share-image {
      width: 50rpx;
      height: 50rpx;
      display: block;
      margin-bottom: 6rpx;
    }
  }
  .booking {
    width: 70%;
	background-color: #000;
    border-radius: 1000rpx;
    font-size: 22rpx;
    color: #F0E95C;
    line-height: 22rpx;
    padding: 10rpx 10rpx 10rpx 30rpx;
    display: flex;
	justify-content: space-between;
	align-items: center;
    line-height: 30rpx;
    text-align: center;
    .sbtn{
      width: 300rpx;
	  height: 80rpx;
	  justify-content: center;
	      align-items: center;
	      display: flex;
	  
      border-radius: 1000px;
      background:#FCDBAB;
      font-size: 30rpx;
      font-weight: bold;
      color: #414141;
      &.yellow{
        background: #F0831E;
        color: #fff;
      }
    }
  }
}
.Burst8 { 
 position: relative;  /* 绝对定位，相对于图片容器 */
 top: -100rpx;       /* 距离底部10px */
 right: 50rpx;        /* 距离右侧10px */
 float: right;
 z-index: 10;
 width: 120rpx; 
 display: flex; 
 justify-content: center;
 align-items: center;            /* 内容垂直居中 */
 font-family: Arial, sans-serif; /* 字体 */
 height: 120rpx;
 background-color: #74ffbb; 
 transform:rotate(20deg); 
 -webkit-transform:rotate(20deg); 
 -ms-transform:rotate(20deg); 
 -moz-transform:rotate(20deg); 
 -o-transform:rotate(20deg); 
} 
.Burst8:before{ 
 width: 120rpx; 
 height: 120rpx; 
 z-index: 10;
 align-items: center;            /* 内容垂直居中 */
 font-family: Arial, sans-serif; /* 字体 */
 background-color: #74ffbb; 
 position: absolute; 
 content: ""; 
 transform:rotate(135deg); 
 -webkit-transform:rotate(135deg); 
 -ms-transform:rotate(135deg); 
 -moz-transform:rotate(135deg); 
 -o-transform:rotate(135deg); 
} 
/* 价格数字样式 */
.Burst8 .price {
  position: relative; 
  z-index: 20;
  font-size: 50rpx;     /* 价格字体大小 */
  font-weight: bold;   /* 加粗 */
  transform:rotate(-30deg);
  -webkit-transform:rotate(-30deg); 
  -ms-transform:rotate(-30deg); 
  -moz-transform:rotate(-30deg); 
  -o-transform:rotate(-30deg); 
}


.swiper-margin {
  position: relative;
  .swiper {
    height: auto;
  }
  .swiper-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }
}

.container {
  background: #FFF8F0;
  width: 100vw;
}
.swiper-padding {
    .barrage-canvas {
      position: absolute;
      height: 188rpx;
      width: 100%;
      background: rgba(255, 255, 255, 0); /*关键点*/
      position: absolute;
      z-index: 2; /*确保在遮盖的元素的上方*/
      top: 0px;
      left: 0px;
    }
    .view-title {
      color: #000;
      font-size: 40rpx;
      font-weight: bold;
      line-height: 50rpx;
      background-color: #ffffff;
      padding: 30rpx 30rpx 43rpx 30rpx;
    }
	.view-time{
		color: #000;
		display:flex;
		margin-top: 5rpx;
		align-items: center;
		width: 100%;
		font-size: 30rpx;
		line-height: 50rpx;
		background-color: #ffffff;
		padding: 30rpx;
		.iconimg{
			width: 50rpx;
			height: 50rpx;
		}
		
		
	}
    .view-base-info{
      margin: 5rpx 0;
      background-color: #ffffff;
      padding: 0 30rpx;
    }
    .address{
      padding: 40rpx 0;
      position: relative;
      display: flex;
      color: #000;
      font-size: 26rpx;
    }
    .steps-row{
      padding: 50rpx 0;
      .row-text-container{
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        font-size: 24rpx;
        line-height: 26rpx;
        text-align: center;
        color: #414141;
      }
      .row-desc{
        font-weight: bold;
        margin-top: 12rpx;
      }
      .row-text{
        display: inline-flex;
        flex: 1;
        flex-direction: column;
      }
    }
    .step-container{
      display: flex;
      flex-direction: row;
      padding-bottom: 30rpx;
      .row-line-item{
        display: inline-flex;
        flex-direction: row;
        flex: 1;
        height: 14px;
        line-height: 14px;
        align-items: center;
        justify-content: center;
      }
      .steps__row-line{
        flex: 1;
        height: 1px;
        background-color: #FFECD6;
      }
      .row-line--before{
        transform: translateX(-1px);
      }
      .row-line--after{
        transform: translateX(1px);
      }
      .steps-row-circle{
        width: 40rpx;
        height: 40rpx;
        margin: 0 24rpx;
      }
      .steps-row{
        display: flex;
        flex-direction: column;
      }
    }
    .number-content {
      margin: 10rpx 0;
      padding: 40rpx 0 40rpx 30rpx;
      font-size: 26rpx;
      line-height: 26rpx;
      background-color: #fff;
      color: #414141;
      .events-touxiang{
        display: flex;
        flex-wrap: wrap;
      }
      .avater{
        width: 70rpx;
        height: 70rpx;
        margin-top: 30rpx;
        margin-right: 30rpx;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .swiper {
      height: 134vw;
      background: #ffffff;
    }

    .swiper-item {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;
    }
}
 .introduce_imglunbo {
    object-fit: cover;
    }
.swiper-itemlunbo{
	 position: relative;
	  overflow: hidden; 
}

/* 底部斜切遮盖层 */
.swiper-itemlunbo::after {
  content: '';
  position: absolute;
  bottom: -70rpx;
  left: 0;
  right: 0;
  height: 80rpx; /* 控制斜切高度 */
  background: #fff; /* 需与父容器背景色一致 */
  transform: skewY(-5deg); /* 倾斜角度 */
  transform-origin: bottom left; /* 倾斜基准点 */
}	
	

.detail-padding {
  padding: 40rpx 0 0 0;
  .content {
    .introduce_img {
      box-shadow: 0rpx 2rpx 3rpx 0rpx #e5e5e5;
      border-radius: 18rpx;
    }

    .tab_nav {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 500rpx;
      height: 80rpx;
      border-radius: 1000px;
      background: #FFF;
      box-shadow: 0px 0px 10px 0px rgba(252, 219, 171, 0.40);
      margin: 0 auto;
    }

    .tab_nav .navTitle {
      flex: 1;
      text-align: center;
      font-size: 26rpx;
      color: #414141;
      height: 80rpx;
    }
    .title_tabs{
      height: 80rpx;
	  display: flex;
	   align-items: center; /* 垂直居中 */
	    justify-content: center; /* 水平居中（可选） */
      border-radius: 1000px;
    }
    .active {
      color: #000;
      font-weight: bold;
	  align-items: center;
	  font-family: AlimamaShuHeiTi-Bold;
      margin: 6rpx;
      background: #FCDBAB;
      height: 68rpx;
    }
    .nav_item,.nav_item_2 {
      margin-top: 46rpx;
    }
    .review_div {
      margin-top: 24rpx;
    }

    .review_faceUrl {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
    }

    .review_title {
      padding: 20rpx 0 14rpx 0;
      display: flex;
      width: 100%;
    }

    .review_time {
      font-size: 24rpx;
      font-weight: 400;
      color: #414141;
      float: right;
      margin-top: 2rpx;
      margin-right: 30rpx;
    }

    .user_name_txt {
      display: inline-block;
      white-space: nowrap;
      margin-right: 10rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 26rpx;
      color: #000;
    }

    .user_name_div {
      display: inline-block;
    }
    .star-level{
      margin-top: 6rpx;
      display: flex;
      padding: 3rpx 6rpx;
      background-color: rgba(0,0,0,0.06);
      border-radius: 6rpx;
      .itmsf{
        width: 24rpx;
        height: 24rpx;
      }
    }
    .review_img {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 18rpx;
    }

    .review_img_div {
      padding: 20rpx;
      width: 210rpx;
      height: 210rpx;
      display: inline-block;
    }
    .review_img_div_video{
      width: 188rpx;
      height: 188rpx;
      display: inline-block;
      position: relative;
      margin: 20rpx 20rpx 20rpx 0;
      border-radius: 20rpx;
    }
    .review_content {
      font-size: 26rpx;
      color: #000;
      padding-bottom:45rpx;
      background: url(https://img.qumoyugo.com/webimgbg/picopino_line_bowen1.png) no-repeat bottom center;
      background-size: 100%;
      &.even{
        background: url(https://img.qumoyugo.com/webimgbg/picopino_line_bowen0.png) no-repeat bottom center;
        background-size: 100%;
      }
    }
    .review_video_div,
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
